<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M512.3072 512.3456m-502.7328 0a502.7328 502.7328 0 1 0 1005.4656 0 502.7328 502.7328 0 1 0-1005.4656 0Z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(230,255,251)'}' /%3E%3Cpath d='M576.0768 264.0128c-1.152-30.4768-26.6752-54.2976-57.1648-53.3632-30.5664-1.0624-56.2432 22.7968-57.3952 53.3632v7.8208c-83.7632 31.04-139.8272 110.3872-141.12 199.7056v71.1552s0 106.9696-26.8032 106.9696c-15.7312-0.6912-29.2096 11.1232-30.592 26.8032-0.192 7.168 2.56 14.1056 7.6288 19.1744 5.0688 5.0688 12.0064 7.8336 19.1616 7.6288h447.5648c13.7728-1.2928 24.2816-12.8512 24.2816-26.688 0-13.824-10.5216-25.3824-24.2816-26.6752-26.8032 0-26.8032-106.9696-26.8032-106.9696V466.56c3.776-87.4496-50.624-166.8864-133.5296-194.9568v-7.5904h-0.9472z m0 0' fill='${(isStr.value ? colors.value : colors.value[1]) || 'rgb(79,209,206)'}' /%3E%3Cpath d='M603.1104 733.8752a81.57696 81.57696 0 0 1-25.2416 57.6256 81.55648 81.55648 0 0 1-58.7264 22.5408 81.52576 81.52576 0 0 1-58.88-22.464 81.55648 81.55648 0 0 1-25.3184-57.7152h168.1664z m0 0' fill='${(isStr.value ? colors.value : colors.value[2]) || 'rgb(119,237,231)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
